<template>
    <div class="SearchMain">
        <el-input placeholder="请输入内容" ref="inputRef" v-model="searchdata" class="input-with-select" style="box-shadow: inset 0 0 25px 0 rgba(79, 170, 255, 0.6)!important;" @blur='SearchBlur' @focus='Searchfocus' clearable  @keyup.enter.native="Enterclick" @clear='clearSearch'>
            <el-button slot="append" icon="el-icon-search" @click="Enterclick" ></el-button>
        </el-input>
        <div class="history" v-show="HistoryShow">
            <ul>
                <li @click="HistoryClick(item)" v-for="(item,index) in historydata" :key="item+index" > <i class="el-icon-time"></i> {{item}}</li>
            </ul>
            <div class="clearhistory" @click="ClearHistory">
                删除历史
            </div>
        </div>
        <div class="information" v-show="informationShow">
            <ul class="infoli">
                <li @click="InformationClick(item)" v-for="(item,index) in information" :key="item+index" >
                    <el-row :gutter="20">
                        <el-col :span="2">
                            <div class="infoindex" >
                                {{index+1}}
                            </div>
                        </el-col>
                        <el-col :span="15">
                            <span style="color:#409EFF;font-size: 16px;">{{item.name}}</span>
                            <div style="color:#fff;font-size: 12px;">{{item.description}}</div>
                        </el-col>
                        <el-col :span="5">
                            <img :src="item.img" alt="" srcset="" style="width:80px;height:80px;">
                        </el-col>
                    </el-row>
                </li>
            </ul>
            <div class="pagecenter">
                <el-pagination
                    small
                    background
                    layout="prev, pager, next"
                    :current-page.sync="infocurrentPage"
                    :page-size="infosize"
                    :total="infototal"
                    >
                </el-pagination>
            </div>
        </div>
        <div class="result" v-if="resultShow">
            <div class="result-top" @click="clickback">
                <i class="el-icon-arrow-left"></i>返回 <span class="highlight">{{infodata.name}}</span> 搜索结果
            </div>
            <div class="result-bottom">
                <div style="padding: 5px 10px;box-sizing: border-box;">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>图片</span>
                            <el-button style="float: right; padding: 3px 3px;background:transparent!important;border:1px solid transparent!important;" >更多 <i class="el-icon-arrow-right"></i></el-button>
                        </div>
                        <img src="../../../public/img/ps_logo2.png" alt="" srcset="" style="width:28%;height:80px;margin:7px;" v-for="(item,index) in 3" :key="index">
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>地形标签</span>
                            <el-button style="float: right; padding: 3px 3px;background:transparent!important;border:1px solid transparent!important;" >更多 <i class="el-icon-arrow-right"></i></el-button>
                        </div>
                        <div style="display:flex;justify-content:space-around;flex-wrap: wrap;">
                            <div class="tagstyle" v-for="(item,index) in tagdata" :key="item+index" style="margin-top:5px;">{{item}}</div>
                        </div>
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>基本属性</span>
                            <el-button style="float: right; padding: 3px 8px;background:#1890ff!important;border:1px solid #1890ff!important;" @click="emit" >编辑</el-button>
                        </div>
                        <el-row>
                            <el-col :span="6">IP地址：</el-col>
                            <el-col :span="18">192.168.0.113</el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="6">创建时间：</el-col>
                            <el-col :span="18">2019-05-31 11:15:24</el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="6">是否关键：</el-col>
                            <el-col :span="18">是</el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="6">厂商：</el-col>
                            <el-col :span="18">华为</el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="6">控守状态：</el-col>
                            <el-col :span="18">……</el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="6">子网掩码：</el-col>
                            <el-col :span="18">255.255.255.0</el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="6">操作系统：</el-col>
                            <el-col :span="18">Window 10</el-col>
                        </el-row>
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>评论</span>
                            <el-button style="float: right; padding: 3px 8px;background:#1890ff!important;border:1px solid #1890ff!important;" @click="write" >写评论</el-button>
                        </div>
                        <el-row v-for="(item,index) in datarate" :key="item+index" style="margin-top:10px;border-bottom:1px solid #174392;padding-bottom:20px;">
                            <el-col :span="3">
                                <img :src="item.img" alt="" srcset="" style="width:32px;height:32px;">
                            </el-col>
                            <el-col :span="21" style="padding:0 20px;">
                                <div style="display:flex;margin-top:5px;">
                                    <span>能力：</span>
                                     <el-rate v-model="item.ability" disabled ></el-rate>
                                </div>
                                <div style="display:flex;margin-top:5px;">
                                    <span>脆弱值：</span>
                                     <el-rate v-model="item.value" disabled ></el-rate>
                                </div>
                                <div style="margin-top:5px;">{{item.make}}</div>
                               
                            </el-col>  
                        </el-row>
                    </el-card>
                </div>
                <el-dialog
                    title="评论"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                    <div>
                        <!-- <div style="display:flex;margin-top:5px;color:#fff;margin-top:10px; font-size:18px">
                            <span>能力：</span>
                                <el-rate v-model="Visibledata.ability"  ></el-rate>
                        </div>
                        <div style="display:flex;margin-top:5px;color:#fff;margin-top:10px; font-size:18px;">
                            <span>脆弱值：</span>
                                <el-rate v-model="Visibledata.value" ></el-rate>
                        </div> -->
                        <el-form ref="form" :model="Visibledata" label-width="100px">
                            <el-form-item label="能力：">
                                <el-rate v-model="Visibledata.ability" style="margin-top:10px;"></el-rate>
                            </el-form-item>
                            <el-form-item label="脆弱值：">
                                <el-rate v-model="Visibledata.value" style="margin-top:10px;" ></el-rate>
                            </el-form-item>
                            <el-form-item label="评论内容：">
                                <el-input type="textarea" v-model="Visibledata.desc"></el-input>
                            </el-form-item>
                            </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
        <Algorithm class="algofithm"/>
    </div>
</template>

<script lang='ts'>
import {Component ,Vue } from 'vue-property-decorator'
import Algorithm from '@/components/algorithm/Algorithm.vue'
@Component({
    components:{
        Algorithm
    }
})
export default class Search extends Vue {
    private centerDialogVisible:boolean=false
    private Visibledata:any={
        ability:0,
        value:0,
        desc:''
    }

    private searchdata:string=''
    private historydata:Array<any>=[
        'xxxxxxx光纤站1',
        'xxxxxxx雷达站1',
        'xxxxxxx光纤站1',
        'xxxxxxx光纤站1',
        'xxxxxxx光纤站1',
    ]
    private HistoryShow:boolean=false
    
    private :boolean=false
    private information:Array<any>=[
        {
            name: `xxxxxxx光纤站1`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            img: require('../../../public/img/ps_logo2.png'),
            point: [116.403874, 39.932153]
          },
          {
            name: `xxxxxxx光纤站2`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            img: require('../../../public/img/ps_logo2.png'),
            point: [100.403874, 34.932153]
          },
          {
            name: `xxxxxxx光纤站3`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            img: require('../../../public/img/ps_logo2.png'),
            point: [112.403874, 30.932153]
          },
          {
            name: `xxxxxxx光纤站4`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            img: require('../../../public/img/ps_logo2.png'),
            point: [119.403874, 29.932153]
          },
          {
            name: `xxxxxxx光纤站5`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            img: require('../../../public/img/ps_logo2.png'),
            point: [110.403874, 39.932153]
          },
          {
            name: `xxxxxxx光纤站6`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            img: require('../../../public/img/ps_logo2.png'),
            point: [110.403874, 39.932153]
          }
    ]
    private informationShow:boolean=false
    private infodata:any={name:''}

    private tagdata:Array<string>=['入口点','接入点','入口点','接入点','入口点','接入点']
    private infocurrentPage:number=1  //分页
    private infototal:number=12
    private infosize:number=6

    private resultShow:boolean=false
    private datarate:Array<any>=[
        {
            img: require('../../../public/img/ps_logo2.png'),
            name:'哈哈哈',
            ability:3,
            value:2,
            make:'评论'
        },
        {
            img: require('../../../public/img/ps_logo2.png'),
            name:'哈哈哈',
            ability:5,
            value:4,
            make:'评论。。。。。评论'
        },{
            img: require('../../../public/img/ps_logo2.png'),
            name:'哈哈哈',
            ability:1,
            value:5,
            make:'评论。。。。。评论。。'
        }
    ]



    public created() {
        
    }
    public mounted() {
        this.$bus.$on('closebox',()=>{
            this.resultShow=false
            this.informationShow=false
        })
    }
    public beforeDestroy() {
        this.$bus.$off('closebox')
    }

    private SearchBlur(){   //搜索框失去焦点事件   隐藏  搜索历史框
        setTimeout(()=>{
            this.HistoryShow=false
        },200)
    }
    private Searchfocus(){  //搜索框获得焦点事件   显示  搜索历史框
        this.HistoryShow=true
    }
    private clearSearch(){ //清除输入框
        this.informationShow=false
    }

    private HistoryClick(item:any){ //搜索历史点击   
        this.searchdata=item
        this.informationShow=true
        this.resultShow=false
        this.$store.commit('SET_ALGO_SHOW',false)
    }
    private Enterclick(){  //搜索
        var ref:any=this.$refs.inputRef
        ref.blur()  //使输入框 失去焦点  隐藏  搜索历史框
        console.log('1111')
        this.HistoryShow=false
        this.informationShow=true
        this.resultShow=false
        this.$store.commit('SET_ALGO_SHOW',false)
    }
    private ClearHistory(){ //清除历史记录

    }

    private InformationClick(item:any){  //搜索出列表的点击事件
        this.infodata=item
        this.informationShow=false
        this.resultShow=true
    }

    private clickback(){   //返回搜索列表
        this.informationShow=true
        this.resultShow=false
        this.searchdata=this.infodata.name
    }

    private emit(){   // 编辑
        this.$store.commit('SET_EDIT_SHOW',true)
    }

    private write(){  //写评论
        this.centerDialogVisible=true
    }
}
</script>

<style lang='scss'>
    .SearchMain{
        width: 350px;
        position: relative;
        .highlight{
            color: #23eafe;
            margin-left: 10px;

            
        }
        .history{
            position: absolute;
            left: 0;
            top: 50px;
            width: 350px;
            max-height:400px;
            border:1px solid #174392;
            background-color:#153454;
            color: #fff;
            font-size: 14px;
            z-index: 999;
            ul{
                margin: 0;
            }
            li{
                padding: 10px 20px;
            }
            li:hover{
                color:#23eafe;
            }
            .clearhistory{
                height: 30px;
                line-height: 30px;
                border-top:1px solid #174392;
                text-align: right !important;
                cursor: pointer;
                padding: 0 20px;
                box-sizing: border-box;
            }
            .clearhistory:hover{
                color:#23eafe;
            }
            
        }
        .information{
            position: absolute;
            left: 0;
            top: 50px;
            width: 350px;
            border:1px solid #174392;
            background:rgba(21, 54, 87,0.5);
            ul{
                margin: 0;
            }
            .infoli>li{
                font-size: 12px;
                padding: 10px 5px;
            }
            .infoli>li:hover{
                background:rgba(64, 158, 255,0.5);
            }
            .pagecenter{
                border-top:1px solid #174392;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
            }
            .infoindex{
                background: url(/img/markers.png);
                height: 28px;
                width: 24px;
                background-position:-225px -189px;
                display: flex;
                justify-content: center;
                line-height: 20px;
                color: #fff;
                font-size: 14px;
            }
        }
        .result{
            position: absolute;
            left: 0;
            top: 50px;
            width: 350px;
            .result-top{
                border:1px solid #174392;
                background-color:rgba(21, 54, 87,0.5);
                height: 40px;
                padding: 5px 10px;
                box-sizing: border-box;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
            }
            .result-bottom{
                border:1px solid #174392;
                background-color:rgba(21, 54, 87,0.5);
                margin-top: 10px;
                color: #fff;
                font-size: 14px;
                max-height: calc(100vh - 200px);
                overflow-x: auto;
                .tagstyle{
                    height: 30px;
                    border:1px solid #ea3131;
                    color:#ea3131;
                    font-size:14px;
                    text-align: center;
                    line-height: 30px;
                    width: 30%;
                    border-radius: 8px;;
                }
            }
        }
        .algofithm{
            position: absolute;
            left: 0;
            top: 50px;
            width: 350px;
        }
        .el-dialog__header{
            
            border: 1px solid #448dcc !important;
            box-shadow: inset 0 0 25px 0 rgba(79, 170, 255, 0.6) !important;
            background:transparent;
            padding: 8px 12px;
        }
        .el-dialog__title{
            color: #fff!important;
        }
        // .el-dialog__body{
        //     background:#153454!important;
        // }
        // .el-dialog__footer{
        //     background:#153454!important;
        // }
        .el-dialog{
            background:#153454!important;
        }
        .el-dialog__headerbtn{
            top:15px!important;
        }
        .el-form-item__label{
            color:#fff;
        }
    }
    .el-input__inner{
        background-color: transparent!important;
        border:1px solid #174392!important;
        color: #fff!important;
        
    }
    .el-button{
        background-color:#174392!important;
        border:1px solid #174392!important;
        color: #fff!important;
    }
    .el-input-group__append, .el-input-group__prepend{
        border:1px solid #174392!important;
        background-color:#174392!important;
    }
    .el-card__header{
        border-bottom: 1px solid #174392!important;
        padding: 10px 20px!important;
    }
    .el-card{
        background-color: transparent!important;
        border: 1px solid transparent !important;
        color: #fff!important;
        
    }
    .el-card.is-always-shadow{
        box-shadow:none!important;
    }
</style>